<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        body {
            background: url(./images/bg.png);
            height: 100vh;
            overflow: hidden;
        }

        .wrapper .title {
            margin-top: -60px;
        }

        .wrapper .title img {
            width: 1200px;
            height: 234px;
            margin-left: 150px;
        }

        /* 视频大小 */
        .wrapper .content {
            position: relative;
        }

        .wrapper .content video {
            width: 1920px;
            /* height: 206px; */
            object-fit: cover;
            z-index: -999;
        }

        /* menu */
        .wrapper .content .menu{
            position: relative;
          
        }
        .wrapper .content .menu ul{
            position: absolute; 
            margin-left: 145px;
            cursor: pointer;
            margin-top: -100px;
        }
        .wrapper .content .menu ul li{
            float: left;
            background: url("./images/dashijie.png") no-repeat -1px 0;
            width: 38px;
            height: 264px;
            margin-right: 15px;
            cursor: pointer ;
            transition: margin-top .5s;
        }

        /* 每个li背景图片的位置改变 */
        .wrapper .content .menu ul li:nth-child(1){
            background-position: -1px 0;
        }
        .wrapper .content .menu ul li:nth-child(2){
            background-position: -60px 0;
        }
        .wrapper .content .menu ul li:nth-child(3){
            background-position: -115px 0;
        }
        .wrapper .content .menu ul li:nth-child(4){
            background-position: -170px 0;
        }
        .wrapper .content .menu ul li:nth-child(5){
            background-position: -225px 0;
        }
        .wrapper .content .menu ul li:nth-child(6){
            background-position: -280px 0;
        }
        /* 给每个li绑定的active标签显示图片相对应 */
        /* 以及鼠标移入的动画 */
        .wrapper .content .menu ul li:nth-child(1).active,.wrapper .content .menu ul li:nth-child(1):hover{
            background-position: -369px 0 ;
            transform:translateY(-20px);
            margin-top:20px;
        }
        .wrapper .content .menu ul li:nth-child(2).active,.wrapper .content .menu ul li:nth-child(2):hover{
            background-position: -428px 0 ;
            transform:translateY(-20px);
            margin-top:20px;
        }
        .wrapper .content .menu ul li:nth-child(3).active,.wrapper .content .menu ul li:nth-child(3):hover{
            background-position: -483px 0 ;
            transform:translateY(-20px);
            margin-top:20px;
        }
        .wrapper .content .menu ul li:nth-child(4).active,.wrapper .content .menu ul li:nth-child(4):hover{
            background-position: -538px 0 ;
            transform:translateY(-20px);
            margin-top:20px;
        }
        .wrapper .content .menu ul li:nth-child(5).active,.wrapper .content .menu ul li:nth-child(5):hover{
            background-position: -594px 0 ;
            transform:translateY(-20px);
            margin-top:20px;
        }
        .wrapper .content .menu ul li:nth-child(6).active,.wrapper .content .menu ul li:nth-child(6):hover{
            background-position: -649px 0 ;
            transform:translateY(-20px);
            margin-top:20px;
        }

    </style>
</head>

<body>
    <div class="wrapper">
        <div class="title">
            <img src="./images/title_bg.png" alt="">
        </div>
        <div class="content">
            <div class="menu">
                <ul>
                    <li class=""></li>
                    <li class=""></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

                <video src="./media/gfsj_gy.mp4"  autoplay muted></video>
    
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var myarr=["./media/gfsj_zy.mp4","./media/gfsj_xj.mp4","./media/gfsj_gy.mp4","./media/gfsj_sl.mp4","./media/gfsj_hh.mp4","./media/gfsj_sc.mp4"];
        $(".wrapper .content ul li").on("click",function(){
            var index=$(this).index();
           myFn(index);
           num=index;
        
        })

        function myFn(myIndex){
            $(".wrapper .content ul li").eq(myIndex).addClass("active").siblings().removeClass("active");
            $("video").attr("src",myarr[myIndex])
        }

        // 自动轮播
        var num=0;
        setInterval(function(){
            num++;
            num=num%$(".wrapper .content ul li").length;
            console.log(num);
            myFn(num)
        },5000)
    </script>
</body>

</html>